{# SPDX-FileCopyrightText: © 2014-2017, 2019, 2021 Siemens AG

   SPDX-License-Identifier: FSFAP
#}

{% import 'include/macros.html.twig' as macro %}

<!-- The User Modal -->
<div class="modal" id="userModal">
  <form name="licenseListSelect">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">

      <!-- Loader -->
      <div id="loader" class="dataTables_processing" style="display:none;">
        Loading...
      </div>

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Edit Decisions</h4>
        <button type="button" class="close" onclick="closeUserModal();" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            {{ macro.bootstrapalert("bulkIdResult", "danger") }}
          </div>
          <div class="row justify-content-md-center pb-3">
            <div class="col">
              <label for="licenseLeft">{{ 'Available licenses'| trans }}: <img src='images/info_16.png'
                title="{{ 'Double-click on license opens a popup with the full text.'| trans }}" alt="{{ 'Double-click on license opens a popup with the full text.'| trans }}" class='info-bullet'/></label>
              <br/>
              <select name="licenseLeft" class="form-control w-100 h-100"
                id="licenseLeft" size="20" multiple="multiple">
                {%  for opt in licenseArray  %}
                <option value= {{ opt.id }} title='{{ opt.fullname | e }}'
                        ondblclick="javascript:window.open('{{ licenseUri }}{{ opt.id }}',
                                  '{{ 'License Text'|trans}}','width=600,height=400,toolbar=no,scrollbars=yes,resizable=yes');" >
                  {{ opt.shortname }}
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-xs-1 my-auto px-0 text-center">
              <input type="button" value="&gt;" class="btn btn-default btn-sm" onclick="moveLicense(this.form.licenseLeft, this.form.licenseRight);" />
              <br><br>
              <input type="button" value="&lt;" class="btn btn-default btn-sm" onclick="moveLicense(this.form.licenseRight, this.form.licenseLeft);" />
            </div>
            <div class="col">
              <label for="licenseRight">{{ 'Selected licenses'|trans }}:</label>
              <br/>
              <select name="licenseRight" class="form-control w-100 h-100" id="licenseRight" size="20" multiple="multiple">
              </select>
            </div>
          </div>
          <div class="row justify-content-md-center pt-3">
            <div class="col text-center">
              <button type="button" class="btn btn-default"
                  onclick="performPostRequest(false);">
                {{ 'Add selected licenses'|trans }}
              </button>
            </div>
            <div class="col-xs-1 my-auto px-0 text-center"></div>
            <div class="col text-center">
              <button type="button" class="btn btn-default"
                  onclick="performPostRequest(true);">
                {{ 'Remove selected licenses'|trans }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-6 text-right">
              <div class="d-flex justify-content-end align-items-center">
                <span class="w-100">
                  Mark decisions as&nbsp;
                </span>
                <select class="custom-select w-100" id="markDecision">
                  <option value="irrelevant">{{ 'Irrelevant'|trans }}</option>
                  <option value="doNotUse">{{ 'Do not use'|trans }}</option>
                  <option value="nonFunctional">{{ 'Non-Functional'|trans }}</option>
                </select>
                <button class="btn" type="button" aria-label="Apply" id="markDecisionAdd">
                  Apply
                </button>
              </div>
            </div>
            <div class="col-md-6 text-left">
              <div class="d-flex justify-content-start align-items-center">
                <span class="w-100">
                  Remove decision&nbsp;
                </span>
                <select class="custom-select w-100" id="removeDecision">
                  <option value="irrelevant">{{ 'Irrelevant'|trans }}</option>
                  <option value="doNotUse">{{ 'Do not use'|trans }}</option>
                  <option value="nonFunctional">{{ 'Non-Functional'|trans }}</option>
                </select>
                <button class="btn" type="button" aria-label="Apply" id="markDecisionRemove">
                  Apply
                </button>
              </div>
            </div>
          </div>
        </div>
        <input name="licenseNumbersToBeSubmitted" id="licenseNumbersToBeSubmitted" type="hidden" value="" />
        <input name="uploadTreeId" id="uploadTreeId" type="hidden" value="{{ uploadTreeId }}" />
      </div>
    </div>
  </div>
  </form>
</div>
